{% extends "website/staff/staff_base.html" %}
{% block staff_content %}
<style>.holistica-form-grid>div{min-width:0}.holistica-form-grid input:not([type=checkbox]),.holistica-form-grid select,.holistica-form-grid textarea{width:100%;max-width:100%;box-sizing:border-box;min-height:44px;padding:10px;border:1px solid #9aabba;border-radius:9px}@media(max-width:750px){.holistica-form-grid{grid-template-columns:1fr!important}}</style>
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">⚡</div>
      <div>
        <h1 class="h1" style="margin:0">Bulk generate slots</h1>
        <div class="small">Generate availability slots for next 7/14/30 days.</div>
      </div>
      <div style="margin-left:auto">
        <a class="btn" href="{% url 'website:staff_slot_list' %}">← Back</a>
      </div>
    </div>

    <div class="sep"></div>

    <form method="post">
      {% csrf_token %}
      {% if not providers %}<p role="alert">No active providers yet. Add an active telehealth provider before generating slots.</p>{% endif %}
      <div class="grid grid-3 holistica-form-grid">
        <div>
          <label class="label">Provider</label>
          <select name="provider" class="input" required>
            {% for p in providers %}
              <option value="{{ p.id }}">{{ p.full_name }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="label">Start date</label>
          <input name="first_day" class="input" type="date" id="slotFirstDay" required>
        </div>
        <div>
          <label class="label">Days</label>
          <select name="days" class="input">
            <option value="7">7</option>
            <option value="14">14</option>
            <option value="30">30</option>
          </select>
        </div>
        <div>
          <label class="label">Capacity per slot</label>
          <input name="capacity" class="input" type="number" value="1" min="1"/>
        </div>
        <div>
          <label class="label">Start time</label>
          <input name="start_time" class="input" type="time" value="09:00"/>
        </div>
        <div>
          <label class="label">End time</label>
          <input name="end_time" class="input" type="time" value="17:00"/>
        </div>
        <div>
          <label class="label">Interval (minutes)</label>
          <input name="interval" class="input" type="number" value="60" min="10"/>
        </div>
      </div>

      <div style="margin-top:14px">
        <button class="btn" type="submit" {% if not providers %}disabled{% endif %}>Generate available slots</button>
      </div>
    </form>
    <script>document.addEventListener("DOMContentLoaded",function(){const d=document.getElementById("slotFirstDay");const today=new Date();const local=new Date(today.getTime()-today.getTimezoneOffset()*60000).toISOString().slice(0,10);d.min=local;d.value=local;});</script>
  </div>
</section>
{% endblock %}